<template>
  <base-breadcrumb>
    <searchData
      ref="search"
      :search-data="searchArr"
      @search="search"
    />
    <a-card>
      <!-- <title-name title="会议室预定" /> -->
      <!-- <div class="table-operator">
        v-btnPermission="'a_030_add_01'"
        <a-button
          type="primary"
          @click="handleUpdate('add', {})"
        >
          会议室预定
        </a-button>
      </div> -->
      <a-spin :spinning="spinning">
        <list-table
            ref="table"
            row-key="key"
            :columns="columns"
            :request="loadData"
            :alert="true"
            show-size-changer
            show-quick-jumper
        >
        <a-button
          slot="prefix"
          type="primary"
          @click="handleUpdate('add', {})"
        >
          会议室预定
        </a-button>
          <span
            slot="serial"
            slot-scope="text, record, index"
          >{{ index + 1 }}</span>
          <template
            slot="meetTime"
            slot-scope="text, record"
          >
            {{ (record.startTime && record.endTime) ? (record.startTime + ' 至 ' + record.endTime) : '' }} 
          </template>
          <template
            slot="sendMeetingNotice"
            slot-scope="text, record"
          >
            <!-- 只针对本部门对本部门会议进行的操作，当其他部门通过搜索查看到了会议信息时，只显示是否发送会议通知的状态，不可操作 -->
            <a
              v-if="(text === '未发送') && (record.reserveDeptId == $currentPost().deptId)"
              :disabled="record.status === '已结束'"
              @click="showSendModal(record)"
            >{{ text }}</a>
            <span v-else>{{ text }}</span>
          </template>
          <template
            slot="operation"
            slot-scope="text, record"
          >
            <MoreButton>
            <!-- 
                    任何人都可进行会议室预定，并对本人预定的会议进行编辑、会期调整、取消会议
                    -->
            <template>
              <a @click="handleUpdate('look', record)">查看</a>
            </template>
            <template v-if="record.status === '待提交' && record.isCreator">
              <a @click="handleUpdate('edit', record)">编辑</a>
            </template>
            <template v-if="record.status === '未开始' && record.isCreator">
              <a @click="handleUpdate('adjust', record)">会期调整</a>
              <a
                style="color: #FB0000;"
                @click="cancleMeet(record.id)"
              >取消会议</a>
            </template>
            </MoreButton>
          </template>
        </list-table>
      </a-spin>
    </a-card>
        
        
    <!-- add modal start -->
    <!-- :formData="formData" -->
    <SendMessage
      :id="reservationId"
      :visible="sendModalVisible"
      :unit-id="unitId"
      :unit-name="unitName"
      :default-value="defaultValue"
      @cancelSub="hideSendModal"
    />
    <!-- @submitForm="showSendModal" -->
    <!-- add modal end -->
  </base-breadcrumb>
</template>
<script>
import moment from 'moment'
// import { STable } from '@/components'
import { reservationList, reservationCancel } from '@/api/office/anualConference/index'
import anualConBase from './baseconfig.js'
import SendMessage from './sendMessage.vue';
export default {
  name:'a'+Date.now(),
  components: {
        // STable,
        SendMessage
    },
    data() {
        this.columns = anualConBase.columns
        this.searchArr = anualConBase.searchArr
        return {
            queryParam: {
              query: {}
            },
            first: true,
            sendModalVisible: false,
            formData: {},
            unitId: null,
            unitName: null,
            reservationId: '',
            defaultValue: [],
            spinning: false,
            loadData: async (parameter) => {
              const requestParameters = Object.assign({}, parameter, this.queryParam)
              return reservationList(requestParameters).then(res => {
                return res
              })
                // try {
                //   const requestParameters = Object.assign({}, parameter, this.queryParam)
                //   this.spinning = true;
                //   const res = await reservationList(requestParameters);
                //   this.spinning = false;
                //   return Promise.resolve({
                //     data: res.data || [],
                //     currentPage: res.currentPage || parameter.pageNo,
                //     totalSize: res.totalSize || 0,
                //   })
                // } catch (e) {
                //   this.spinning = false;
                //   return Promise.reject(e)
                // }
            },
        }
    },
    computed: {
      deptId() {
        return this.$userInfo().currentPost.deptId
      }
    },
    methods: {
        deptIdList(val) {
          if (this.first) {
            const param = {reserveDeptId: this.deptId};
            this.$refs.search.form.setFieldsValue(param)
            this.$refs.search.search();
            this.first = false;
          }
        },
        //搜索
        search(val = {}) {
          if (val.time && val.time.length) {
            val.startTime = this.$dateFormat(val.time[0], 's').substr(0, 11) + '00:00:00';
            val.endTime = this.$dateFormat(val.time[1], 's').substr(0, 11) + '23:59:59';
          }
          delete val.time;
          this.queryParam.query = {
              ...val,
          }

          this.$refs.table.refresh(true)
        },

        // 处理更新操作（新增、编辑）
        async handleUpdate(type, data = {}) {
          // if (type == 'add') {
            this.$router.push({
                name: 'ReservationEdit',
                query: {
                    id: data.id || '',
                    pageType: type
                },
            })
          // }
        },
        cancleMeet(id) {
          let _this = this;
          this.$confirm({
            title: '请确认是否要取消会议？',
            content: '确认要取消会议',
            okType: 'danger',
            onOk() {
              _this.spinning = true;
              reservationCancel({id: id}).then((res) => {
                if (res.data && res.data.code == 200) {
                  _this.$refs.table.refresh(true)
                  _this.$message.success('取消成功')
                } else {
                  _this.$message.error('会议取消失败！')
                }
              })
            }
          });
        },
        showSendModal(record) {
          this.unitId = record.unitId;
          this.unitName = record.unitName;
          
          const list = record.attendList ? [
            ...record.attendList
          ] : [];
          this.defaultValue = list;
          this.reservationId = record.id;
          this.sendModalVisible = true;
        },
        hideSendModal(refresh) {
          this.sendModalVisible = false;
          if (refresh == 'refresh') this.$refs.table.refresh(true);
        },

    },
}
</script>
<style>
  .flex-model-form .ant-form-item{
    display: flex;
  }
  .ant-select-dropdown-menu {
    text-align: left;
  }
</style>
